import QtQuick 2.0

Item {
    id: root;

    PathView {
        id: pathView;
        width: 100;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;

        delegate: flipCardDelegate1;
        model: 100;

        path: Path {
            startX: pathView.width / 2
            startY: 0;

            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: -90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: pathView.width/2; y: pathView.height*0.4; }
            PathPercent { value: 0.48; }
            PathLine { x: pathView.width/2; y: pathView.height*0.5; }
            PathAttribute { name: "itemZ"; value: 100; }
            PathAttribute { name: "itemAngle"; value: 0.0; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathLine { x: pathView.width/2; y: pathView.height*0.6; }
            PathPercent { value: 0.52; }
            PathLine { x: pathView.width/2; y: pathView.height; }
            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
        }

        //可见子项目的数量
        pathItemCount: 16;

        //当前项的显示区间
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
    }

    PathView {
        id: pathView2;
        anchors.left: pathView.right;
        anchors.top: parent.top;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        clip: true;

        delegate: flipCardDelegate2;
        model: 100;

        path: Path {
            startX: 0;
            startY: pathView2.height/2;

            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: pathView2.width*0.4; y: pathView2.height/2; }
            PathPercent { value: 0.48; }
            PathLine { x: pathView2.width*0.5; y: pathView2.height/2; }
            PathAttribute { name: "itemZ"; value: 100; }
            PathAttribute { name: "itemAngle"; value: 0.0; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathLine { x: pathView2.width*0.6; y: pathView2.height/2; }
            PathPercent { value: 0.52; }
            PathLine { x: pathView2.width; y: pathView2.height/2; }
            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemAngle"; value: -90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
        }

        //可见子项目的数量
        pathItemCount: 16;

        //当前项的显示区间
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
    }

    Component {
        id: flipCardDelegate1;

        Rectangle {
            id: wrapper;

            width: 100;
            height: 64;
            antialiasing: true;

            visible: PathView.onPath;
            scale: PathView.itemScale;
            z: PathView.itemZ;
            border.width: 2;
            border.color: "#157efb";

            gradient: Gradient {
                GradientStop { position: 0.0; color: "#ffffff" }
                GradientStop { position: 1.0; color: "#2467ec" }
            }

            Text {
                anchors.centerIn: parent;

                color: "#1f1f1f";
                font.pointSize: 14;
                text: index;
            }

            property variant rotX: PathView.itemAngle;

            transform: Rotation {
                axis { x: 1; y: 0; z: 0; }
                angle: wrapper.rotX;
                origin { x: 32; y: 32; }
            }
        }
    }

    Component {
        id: flipCardDelegate2;

        Rectangle {
            id: wrapper;

            width: 100;
            height: 64;
            antialiasing: true;

            visible: PathView.onPath;
            scale: PathView.itemScale;
            z: PathView.itemZ;
            border.width: 2;
            border.color: "#157efb";

            gradient: Gradient {
                GradientStop { position: 0.0; color: "#ffffff" }
                GradientStop { position: 1.0; color: "#2467ec" }
            }

            Text {
                anchors.centerIn: parent;

                color: "#1f1f1f";
                font.pointSize: 14;
                text: index;
            }

            property variant rotX: PathView.itemAngle;

            transform: Rotation {
                axis { x: 0; y: 1; z: 0; }
                angle: wrapper.rotX;
                origin { x: 32; y: 32; }
            }
        }
    }
}
